<template>
  <div id="app">
    <div v-transfer-dom>
      <div v-model="isLoading"></div>
    </div>
        <!--<keep-alive>-->
        <router-view class="router-view"></router-view>
        <!--</keep-alive>-->
  </div>
</template>

<script type="text/babel">
  import { mapState, mapActions } from 'vuex'
  import TransferDom from './directives/transfer-dom'

  export default {
    name: 'app',
    directives: {
      TransferDom
    },
    components: {
    },
    data () {
      return {
      }
    },
    computed: {
      ...mapState({
        route: state => state.route,
        path: state => state.route.path,
        isLoading: state => state.loadingCount > 0
      })
    },
    methods: {
      ...mapActions([])
    },
    watch: {
    }
  }
</script>
<style lang="less">
  html,
  body,
  #app {
    position: relative;
    /*height: 100%;*/
    width: 100%;
    /*overflow: hidden;*/
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  .router-view {
    position: relative;
    width: 100%;
    height: 100%;
  }
</style>
